import React, { Component } from 'react'
import { connect } from 'react-redux'
import { WhiteSpace, List, WingBlank } from 'antd-mobile'
import { Chart, Guide, Axis, Interval, Coord, Legend } from 'ant-design-mobile-chart'
import TitleNavBar from '@/common/components/displays/TitleNavBar'
import '@/common/style/ui.less'
import '@/common/style/reward.less'
const Item = List.Item;
const Brief = Item.Brief;
console.log(Legend)
class Reward extends Component {
    constructor(props) {
        super(props)
        this.state = {
            titleData: {
                title: "Back",
                centerTitle: "Agency Reward",
            },
            data: [{
                name: '股票类',
                percent: 83.59,
                a: '1',
                colorType: '#FE5D4D'
              }, {
                name: '债券类',
                percent: 2.17,
                a: '1',
                colorType: '#3BA4FF'
              }, {
                name: '现金类',
                percent: 14.24,
                a: '1',
                colorType: '#737DDE',
              }],
            map: [
                {name: '股票类',value : '83.59%',marker: {
                    symbol: 'circle',
                    fill: '#FE5D4D',
                    radius: 5
                }},
                {name: '债券类',value : '2.17%',marker: {
                    symbol: 'circle',
                    fill: '#3BA4FF',
                    radius: 5
                }},
                {name: '现金类',value : '14.24%',marker: {
                    symbol: 'circle',
                    fill: '#737DDE',
                    radius: 5
                }}
            ],
            dataTable : Array.from(new Array(9)).map((_val, i) => ({
                text: `name${i}`,
            })),
            tableHead: [
                {id: 1, value: "Month"},
                {id: 2, value: "Sharing"},
                {id: 3, value: "Allowance"},
                {id: 4, value: "Bouns"},
                {id: 5, value: "Prize"}
            ],
            tableBody:[
                {pid: 1,
                content:[
                    {id: 1, value: "2018-10"},
                    {id: 2, value: ""},
                    {id: 3, value: ""},
                    {id: 4, value: ""},
                    {id: 5, value: ""}
                ]},
                {pid: 2,
                content:[
                    {id: 1, value: "2018-09"},
                    {id: 2, value: ""},
                    {id: 3, value: ""},
                    {id: 4, value: ""},
                    {id: 5, value: ""}
                ]},
                {pid: 3,
                content:[
                    {id: 1, value: "2018-08"},
                    {id: 2, value: ""},
                    {id: 3, value: ""},
                    {id: 4, value: ""},
                    {id: 5, value: ""}
                ]},
                {pid: 4,
                content:[
                    {id: 1, value: "2018-07"},
                    {id: 2, value: ""},
                    {id: 3, value: ""},
                    {id: 4, value: ""},
                    {id: 5, value: ""}
                ]}
            ] 
        }
    }
    render() {
        return (
            <div className="rewardcontainer">
                <TitleNavBar titleData={this.state.titleData} Drawerstatus={false}/>
                <WhiteSpace />
                <div style={{background: "#fff"}}>  
                <Chart
                    width="400"
                    height="180"
                    padding= {[ 20, 250, 20, 20 ]}
                    source={this.state.data} 
                    pixelRatio={window.devicePixelRatio}>
                    {/* 柱形图 */}
                    <Interval position="a*percent" color="colorType" adjust="stack"/>
                    {/* 设置坐标系：极坐标 */}
                    <Coord type="polar" transposed={true} innerRadius= {0.7} radius={5}/>
                    {/* 两个坐标轴 */}
                    <Axis field="percent" enable={false}/>
                    <Axis field="a" enable={false}/>
                    {/* 中间文字 */}
                    <Guide type="html" 
                        position = {['50%', '45%']}
                        html={ '<div style="width: 100px;height: 40px;text-align: center;">' + '<div style="font-size: 14px">总资产</div>' + '<div style="font-size: 20px">133.08 亿</div>' + '</div>'}
                    />
                    {/* 自定义图例 */}
                    <Legend enable={true} offsetX={-80} custom={true} items={this.state.map} position={'right'} itemFormatter={(val)=>{ return val}}/>
                </Chart>
                </div>
                <WhiteSpace />
                <WingBlank>
                    <div className="sub-title">Revenue List </div>
                </WingBlank>
                <WhiteSpace />
                <table>
                    <thead>
                    <tr>
                        {
                            this.state.tableHead.map((item)=>
                                <th key={item.id}>{item.value}</th>
                            )
                        }
                    </tr>
                    </thead>
                    <tbody>
                        {
                            this.state.tableBody.map((item)=>
                                <tr key={item.pid}>
                                    {item.content.map((childItem)=>
                                        <td key={childItem.id}>{childItem.value}</td>
                                    )}
                                </tr>
                            )
                        }
                    </tbody>
                </table>
            </div>
        )
    }

}
function mapStateToProps(state, ownProps) {
    return {

    }
}
export default connect(mapStateToProps)(Reward);